---
title: typescript-apollo-client-helpers
description: Generates helpers for improving the integration of TypeScript and Apollo-Client, based on your schema. This plugin generates fully-typed keyFields and Type-Policies for Apollo-Client.
---

import { Callout } from '@theguild/components'
import { PluginApiDocs, PluginHeader } from '@/components/plugin'
import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
export const getStaticProps = pluginGetStaticProps(__filename)

<PluginHeader />

This plugin generates helpers for improving the integration of TypeScript and Apollo-Client, based on your schema.

<Callout type="warning">Note: this plugin generates code that intended for `apollo-client` @ `> v3` only.</Callout>

This plugin generates fully-typed `keyFields` and Type-Policies for Apollo-Client.

<Callout>
  [You can read more about type-policies in Apollo Cache
  here](https://apollographql.com/docs/react/caching/cache-configuration/#typepolicy-fields)
</Callout>

### How to use?

Start by adding this plugin to your configuration:

```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'my-schema.graphql',
  generates: {
    'apollo-helpers.ts': {
      plugins: ['typescript-apollo-client-helpers']
    }
  }
}
export default config
```

Then, use the generated TypeScript `type` as your signature for `typePolicies`:

```ts /StrictTypedTypePolicies/2
import { StrictTypedTypePolicies } from './apollo-helpers'

const typePolicies: StrictTypedTypePolicies = {
  // Keys in this object will be validated against the types on your schema
  Product: {
    keyFields: ['id'] // Values in this field will be validated against the available fields from the Product type
  },
  Person: {
    keyFields: ['name', 'email']
  },
  Book: {
    // This entire definition is typed, based on available types and fields
    fields: {
      tags: {
        merge: false
      }
    }
  }
}

const cache = new InMemoryCache({ typePolicies })
```

<PluginApiDocs />
